<template>
  <div class="home">
    <PageContainer>
      <Member></Member>
      <div class="swiper-container">
        <ImageSwiper
          :list="list"
          :height="swiperHeight"
          @change="onchange"
        ></ImageSwiper>
      </div>
      <div class="subscribe-container">
        <div class="text">NEW RELEASES</div>
        <div class="subscribe" @click="goto">立即预约</div>
      </div>
    </PageContainer>
    <TabBar></TabBar>

    <div v-if="showLiwu" class="liwu">
      <image class="gift" src="http://xishifile.oss-cn-hangzhou.aliyuncs.com/202308/09/gift.png"></image>
      <div class="yuyue">预约有礼</div>
      <u-icon name="close-circle" color="#fff" size="28" @click="hideLiwu()"></u-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "@/hooks/useRouter";
import TabBar from "@/components/TabBar/index.vue";
import PageContainer from "@/components/PageContainer/index.vue";
import Member from "@/components/Member/index.vue";
import ImageSwiper from "@/components/ImageSwiper/index.vue";
import { getActiveList } from "@/api";
import { isAuth } from "@/hooks/useLogin";
import { useStorage } from "@/hooks/useStorage";

const { setItem, getItem } = useStorage();

const router = useRouter();
const route = getCurrentPages();
const swiperHeight = ref(uni.upx2px(987));

const list = ref([]);
const current = ref(0);
const showLiwu = ref(false);

const hideLiwu = () => {
  showLiwu.value = false
  setItem('read_active', 'true')
}

const goto = () => {
  if (!isAuth()) return;
  const item = list.value[current.value];
  router.push({
    path: `/pages/reserveInfo/index?activeId=${item.id}`,
  });
};

const onShareAppMessage = () => {
  return {
    title: '融华荟礼服定制',
    path: route[route.length - 1].route,
  }
}

const onchange = (e) => {
  current.value = e.current;
};

onMounted(async () => {
  try {
    const res = await getActiveList();
    list.value = res?.records || [];
  } catch (error) {
    console.log("接口请求异常----", error);
  }
  if (getItem('read_active') !== 'true') {
    // 是否展示活动弹窗
    showLiwu.value = true 
  }
});
</script>

<style lang="less" scoped>
.home {
  .swiper-container {
    width: 343px;
    height: 489px;
    margin: 46px auto 16px auto;
  }
  .subscribe-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    .text {
      font-size: 12px;
      font-family: AppleSystemUIFont;
      color: #c0c0c0;
      line-height: 15px;
      letter-spacing: 4px;
    }
    .subscribe {
      width: 166px;
      height: 35px;
      border: 1px solid #282828;
      text-align: center;
      line-height: 35px;
      margin-top: 8px;
    }
  }

  .liwu {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    z-index: 999;
    top: 0;
    left: 0;   
    background: rgba(0,0,0,0.5);
    transition: all 250ms;
    .gift {
      width: 204px;
      height: 200px;
      animation-name: shake;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    .yuyue {
      width: 128px;
      height: 36px;
      background: linear-gradient(90deg, #D99D52 0%, #FBEAC2 50%, #D99D52 100%);
      border: 1px solid rgba(255,255,255,0.5);
      text-align: center;
      line-height: 36px;
      color: #89482B;
    }
  }
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(10deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
</style>
